.in-form-designer {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;

	.ep-container {
		.ep-aside {
			overflow: hidden;
		}
	}

	.content {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;

		.in-form-designer-main {
			padding: 0 5px;
			overflow: hidden;
		}
	}

	.designer-box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow: hidden;

		&::-webkit-scrollbar {
			background-color: #fff;
		}

		.in-ghost {
			background-color: #0052cc;
			height: 5px;
			overflow: hidden;
			box-sizing: border-box;
			border-radius: 7px;
		}
	}
}

.in-control-form {
	width: 100%;
	height: 100%;
	box-sizing: border-box;

	.form-content {
		height: 100%;
		width: 100%;
		border-radius: 7px;
		box-sizing: border-box;
		padding: 5px 5px 5px 5px;
		overflow: auto;

		&.operate {
			.form {
				.control-item {

					>.item {
						.handle-content {
							display: none;
						}
					}
				}
			}
		}

		.form {
			height: 100%;
			width: 100%;
			box-sizing: border-box;

			.ep-form-item {
				margin-bottom: 0;
			}

			&::-webkit-scrollbar-thumb {
				backdrop-filter: blur(5px);
				background-color: rgba(23, 23, 23, 0.3);
			}

			&::-webkit-scrollbar {
				background-color: transparent;
			}

			.draggable {
				height: 100%;
				width: 100%;
				box-sizing: border-box;
			}

			.control-item {
				box-sizing: border-box;

				>.item {
					box-sizing: borde-box;
					padding: 2px;
					border: 2px dashed transparent;
					position: relative;

					&.layout {

						>.handle-content {
							z-index: 9999;
							visibility: hidden;
						}

						>.form-item {
							padding: 2px;
						}
					}

					.handle-content {
						min-height: 30px;
						position: absolute;
						width: calc(100% - 4px);
						height: calc(100% - 4px);
						overflow: hidden;
						border-radius: 7px;
						z-index: 999;
						display: flex;
						align-content: center;
						align-items: center;
						visibility: visible;
						box-sizing: border-box;

						>.fns {
							visibility: hidden;
							width: 100%;
							display: flex;
							padding: 0 10px;
							justify-content: space-between;

							.item {
								padding: 5px 10px;
								display: flex;
								justify-content: center;
								align-content: center;
								align-items: center;
								border-radius: 50px;
								background-color: rgba(255, 255, 255, .2);
								backdrop-filter: blur(2px);

								.icon {
									color: #0052cc;
								}

								&:hover {
									background-color: #0052cc;
									cursor: pointer;

									.icon {
										color: #fff;
									}
								}
							}

							.left {
								display: flex;
								justify-content: center;
								align-content: center;
								align-items: center;

								.move {
									cursor: move;
								}
							}

							.right {
								display: flex;
								justify-content: center;
								align-content: center;
								align-items: center;

								.item {
									margin-left: 10px;
								}
							}
						}
					}

					&.action {
						border: 2px dashed rgb(0, 82, 204, 1);
						border-radius: 7px;

						>.handle-content {
							background-color: rgba(0, 82, 204, 0.2);
							visibility: visible;

							>.fns {
								visibility: visible;
							}
						}

						&.layout {
							>.handle-content {
								visibility: visible;
							}
						}
					}

					.form-item {
						border: 1px dashed #0052cc;
						box-sizing: border-box;
						padding: 3px 2px;
						border-radius: 7px;
						overflow: hidden;
						min-height: 40px;

						&:hover {
							border: 1px dashed rgb(248, 47, 154);
						}

						.footer {
							padding: 5px 0 0 0;
							text-align: right;

							.el-button--medium.is-circle {
								padding: 3px;
							}
						}
					}
				}

			}

			.in-ghost>* {
				display: none;
			}
		}
	}
}


.control-list {
	height: 100%;
	width: 290px;
	overflow: hidden;
	box-sizing: border-box;

	>.content {
		width: calc(100% - 10px);
		height: calc(100% - 50px);
		box-sizing: border-box;
		overflow: auto;
		margin: auto auto;

		&::-webkit-scrollbar-thumb {
			backdrop-filter: blur(5px);
			background-color: rgba(23, 23, 23, 0.3);
		}

		&::-webkit-scrollbar {
			background-color: transparent;
		}

		>.group {
			padding: 0 5px;
			margin-bottom: 10px;

			>.title {
				color: #0052cc;
				font-size: 20px;
				font-weight: 600;
				padding: 5px 0;
			}

			.draggable>.item {
				height: 58px;
				width: 58px;
				display: inline-block;
				text-align: center;
				color: #0052cc;
				cursor: move;
				border: 1px dashed transparent;
				margin: 0 3px 3px 0;
				border-radius: 7px;

				&:hover {
					color: #0052cc;
					border-radius: 7px;
					border: 1px dashed #0052cc;
				}
			}

			.draggable>.item>.icon {
				font-size: 20px;
				padding: 1px 0 4px 0;
			}

			.draggable>.item>.label {
				font-size: 13px;
				color: #000;
			}

			.draggable>.item:hover>.label {
				color: #0052cc;
			}
		}
	}
}